<template>
	<view class="content">
		
		<view class="zhanghao-title">轻触头像以切换账号</view>
		
		<view class=" margin-cell-group " style="display: flex;" v-for="(item, index) in list" :key="index" >
			<view  style="width: 100%;position: relative;" class="">
				<view class="cell-item-hd zhanghao" :class="item.zhanghao" @click="toggle(index)">
					<image class="zhanghao-avatar" :src="item.avatar"></image>
					<view>{{ item.nickname }}</view>
				</view>
				<view v-if="item.checked == true" class="zhanghao-now">当前</view>
			</view>
			<button class='btn btn-circle btn-w' hover-class="btn-hover" style="border:1rpx solid #e9cb9a;background-color:#e9cb9a;height: 140rpx;line-height: 140rpx;border-radius: 0 20rpx 20rpx 0" v-if="item.checked == false" @click="del(index)" >删除</button>
			
		</view>
		<view class="login-b zhanghao">
			<view  style="width: 100%;">
				<view class="cell-item-hd" @click="goForgetpwd">
					<image class="zhanghao-avatar" src="/static/img/adduser.png"></image>
					<view>登录其他账号</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/config/config.js';
	import {
		goBack,
		jumpBackPage
	} from '@/config/mixins.js';
	export default {
		mixins: [goBack, jumpBackPage],
		data() {
			return {
				list:[],
				token:''
			};
		},
		onLoad(options) {
			if (options.invitecode) {
				this.$db.set('invitecode', options.invitecode);
			}
			
		},
		onShow() {
			this.token = this.$db.get('userToken');
			if(this.$db.get('token_list'))
			{
				this.list = this.$db.get('token_list');
			}
			console.log('token',this.token)
			if(this.token)
			{
				this.$api.userInfo({}, res2 => {
					if (res2.status) {
						let index = this.list.findIndex(function(item) {
							if (item.user_id == res2.data.id)
								return true;
						})
						if(index >= 0)
							this.list.splice(index,1)
						let token = {token:this.token,nickname:res2.data.nickname,username:res2.data.username,user_id:res2.data.id,mobile:res2.data.mobile,avatar:res2.data.avatar,checked:true,zhanghao:'zhanghao'}
						this.list.unshift(token);
						console.log(this.list)
						this.toggle(0);
					}
				})
			}
			

		},
		computed: {

		},
		methods: {
			toggle(index){
				console.log(index)
				this.list.forEach((val,key)=>{
					if(key==index){
						val.checked=true;
						val.zhanghao='zhanghao'
						this.token = val.token
					}else{
						val.checked=false;
						val.zhanghao='zhanghao2'
					}
						
				})
				this.$db.set('token_list', this.list);
				this.$db.set('userToken',this.token);
				if(index != 0 )
				uni.navigateTo({
					url:'/pages/member/index/index'
				})
			},
			del(index)
			{
				let that= this
				uni.showModal({
					title: '删除账号',
					content: '确定删除该账号吗？',
					success: function (res) {
						if (res.confirm) {
							let list = that.list.splice(index,1)
							that.$db.set('token_list',that.list);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});	
				
			},
			goForgetpwd() {
				this.$common.navigateTo('/pages/login/login/index1');
			}
		}
	};
</script>

<style lang="scss">
	.content {
		
		/*  #ifdef  H5  */
		height: calc(100vh - 80upx);
		/*  #endif  */
		/*  #ifndef  H5  */
		height: 100vh;
		/*  #endif  */
		// background-color: #f3f3f3;

		padding: 0 100upx ;
	}

	.checked{
		color: red;
	}

	.login-b .btn {
		color: #999;
	}

	.btn-b {
		color: #fff !important;
	}

	.cell-item{
		color: #444444;
	}
	.zhanghao-title{
		width: 100%;
		height: 240rpx;
		line-height: 180rpx;
		text-align: center;
		font-size: 50rpx;
		padding-top: 60rpx;
		color: #fff;
	}
	.zhanghao{
		width: 100%;
		height: 140rpx;
		background-color: #fff;
		border-radius: 20rpx;
		line-height: 140rpx;
	}
	.zhanghao2{
		width: 100%;
		height: 140rpx;
		background-color: #fff;
		border-radius: 20rpx 0 0 20rpx;
		line-height: 140rpx;
	}
	.zhanghao-avatar{
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin: 0 40rpx;
	}
	.zhanghao-now{
		position:absolute;
		top: 0rpx;
		right: 0rpx;
		width: 80rpx;
		height: 40rpx;
		text-align: center;
		background-color: lightskyblue;
		border-radius: 0 20rpx 0 20rpx;
		color: royalblue;
		font-size: 28rpx;
	}
</style>
